import { useState, useEffect } from 'react'
import './ua.scss'

export default function Ua () {
  // ssr，不能在 node 环境获取，只能新增变量 useEffect 里获取
  const [ua, setUa] = useState('')
  const [bodyWidth, setBodyWidth] = useState(0)
  const [screenWidth, setScreenWidth] = useState(0)
  const [bodyHeight, setBodyHeight] = useState(0)
  const [screenHeight, setScreenHeight] = useState(0)

  useEffect(() => {
    setUa(window.navigator.userAgent)
    setBodyWidth(document.body.clientWidth)
    setScreenWidth(screen.width)
    setBodyHeight(document.body.clientHeight)
    setScreenHeight(screen.height)
  }, [])

  return (
    <div id="ua-page">
      <div className="info-item">
        <span className="label">User Agent</span>
        {ua}
      </div>
      <div className="info-item">
        <span className="label">width</span>
        document.body.clientWidth: {bodyWidth}px, screen.width: {screenWidth}px
      </div>
      <div className="info-item">
        <span className="label">height</span>
        document.body.clientHeight: {bodyHeight}px, screen.height: {screenHeight}px
      </div>
    </div>
  )
}
